<template>
  <el-container class="tryme-theme" :class="$store.state.currentTheme">
    <el-aside :width="'15rem'">
      <div class="title">
        <div>{{ title }}</div>
        <div>OpenGauss</div>
      </div>

      <el-scrollbar class="aside-content">
        <!-- <DirectionTree :directions="directions"></DirectionTree> -->
        <el-menu @select="menuSelect">
          <DirectionTree :directions="directions"></DirectionTree
        ></el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-main id="main-content"><MainContent ref="mainContent"></MainContent></el-main>
    </el-container>
  </el-container>
</template>

<script>
import { THEMES } from '@/utils/constants';
import errorDispatcher from '@/utils/errorHandler';
import directions from '@/directions/directions';
import getDirection from '@/directions/directionMap';
import httpRequest from '@/utils/httpRequest';
import { getUrlKey, cookieTool, base64 } from '@/utils/common';
import errors from '@/utils/errors';

import { tAlert, tMessage } from '@/utils/tLayer';

// components
import MainContent from '@/components/MainContent.vue';

// import DirectionTree from './components/DirectionTree.vue';
import DirectionTree from '@/components/DirectionMenuTree.vue';

// theme
import '@/styles/tryme-theme/dark.scss';
import '@/styles/tryme-theme/light.scss';

export default {
  name: 'App',
  components: {
    DirectionTree,
    MainContent,
  },
  data() {
    return {
      title: 'TryMe',
      directions,
      layout: [],
      THEMES,
    };
  },
  methods: {
    menuSelect(index) {
      this.$refs.mainContent.showDirectionT(getDirection(index));
    },
    login(code) {
      httpRequest.get(`login/gitee/${code}`).then((resp) => {
        if (resp.data.code === 0) {
          tMessage.success(resp.data.msg);
          this.$store.dispatch('login', resp.data.userInfo);
        } else {
          throw errors.WarningError(resp.data.msg);
        }
      });
    },
    checkLogined() {
      const userInfoBase64 = cookieTool.getCookie('userInfo');
      if (userInfoBase64 !== null) {
        this.$store.dispatch('login', JSON.parse(base64.decode(userInfoBase64)));
      } else {
        const userCode = getUrlKey('code');
        if (userCode !== null) {
          this.login(userCode);
        }
      }
    },
  },
  /**
   * 生命周期函数
   */
  mounted() {},
  beforeMount() {
    httpRequest.setResponseInterceptor(
      (resp) => resp,
      (err) => {
        if (err.message === 'Network Error') {
          if (this.$store.getters.isLogined) {
            this.$store.dispatch('logout');
          }
          tAlert.error('目前无法连接到服务器，请稍后再试!');
        }
        return Promise.reject(err);
      },
    );
    if (this.$store.getters.userInfo === null) {
      this.checkLogined();
    }
  },
  errorCaptured(err) {
    errorDispatcher(err);
    return false;
  },
};
</script>

<style lang="scss">
a {
  text-decoration: none;
}

html,
body,
#app,
.el-container {
  background-color: #ffffff;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.el-aside {
  padding: 0px;
  overflow: hidden;
}

#main-content {
  padding: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.title {
  height: 65px;
  font-size: 24px;
  font-weight: 700;
  // background-color: #409eff;
  color: #409eff;
}

.title a {
  color: #ffffff;
}

.aside-content {
  padding: 0px;
  height: calc(100% - 60px);
}
</style>
